<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-01-11 18:38:08
-->
<template>
    <div class="detail w">
        <!-- 左侧 -->
        <div class="left">
            <h2 style="padding-bottom: 15px;cursor: pointer;" @click="goback"> &lt; {{ info.type == 'video' ? '视频详情' :
                'MV详情'
            }}</h2>
            <!-- mv|视频播放器 -->
            <div class="play">
                <video :src="playUrl" autoplay="true" loop="true" controls="controls"></video>
            </div>
            <!-- 视频信息 -->
            <VideoInfo :videoinfo="info.mvList" :type="info.type" :isSub="info.isSub" :subMvBy="subMvBy"
                :likeVideoBy="likeVideoBy" :likedCount="info.likedCount" :shareCount="info.shareCount">
            </VideoInfo>
            <!-- 视频评论 -->
            <div class="video-comment">
                <h2 style="padding-bottom: 10px">评论</h2>
                <CommentPage :commentType="info.commentType" :commentresId="info.id"></CommentPage>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
            <h3>相关推荐</h3>
            <div class="item" v-for="(item, index) in info.simList" :key="item.id">
                <SimiVideo :simList="item" :type="info.type"></SimiVideo>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { reactive, onMounted, watch, inject, computed } from 'vue'
import { getSimiMv, getMvDetail, getMvUrl, getMvData, getSimVideo, getVideoDetail, getVideoUrl, getVideoDetails } from '@/api/recvideo/recvideo.js'
import VideoInfo from '@/views/videodetail/chirld/VideoInfo.vue'
import SimiVideo from './chirld/SimiVideo.vue'
import CommentPage from '../../components/content/comment/CommentPage.vue'
const route = useRoute()
const router = useRouter()
const info = reactive({
    id: '',
    type: '',
    mvList: {}, //当前mv||视频信息
    simList: [], //相似mv||视频列表
    mvUrl: '', //mv播放地址 
    isSub: false, //使用收藏该视频
    isLikeInfo: {}, //是否点赞的信息
    islike: false, //是否点赞视频
    likedCount: 0, //点赞数
    commentCount: 0,//评论数
    shareCount: 0, //分享数
    commentType: 1,  //评论类型
    videoUrl: '',  //视频播放地址
})

const reload = inject('reload')
//回到mv||视频页面
function goback() {
    if (info.type == 'mv') {
        router.push('/recvideo/mv')
    } else if (info.type == 'video') {
        router.push('/recvideo/video')
    }
}

let playUrl = computed(() => {
    return info.mvUrl || info.videoUrl
})

//获取mv详情数据
async function getMvDetailBy() {
    let res = await getMvDetail(info.id)
    if (res.data.code === 200) {
        info.mvList = res.data.data  //得到当前mv详细信息
    }
}
//获取相似mv数据
async function getSimiMvBy() {
    let res = await getSimiMv(info.id)
    if (res.data.code === 200)
        info.simList = res.data.mvs
}
//获取mv播放地址
async function getMvUrlBy() {
    let res = await getMvUrl(info.id)
    if (res.data.code === 200)
        info.mvUrl = res.data.data.url
}

//子组件点击收藏按钮的回调函数
function subMvBy() {
    console.log(123);
}
//子组件点赞按钮的回调函数
function likeVideoBy() {
    console.log(456);
}

//获取该mv点赞收藏评论数
async function getMVDatas() {
    let res = await getMvData(info.id)
    if (info.type == 'mv' && res.data.code === 200) {
        info.commentCount = res.data.commentCount
        info.likedCount = res.data.likedCount
        info.shareCount = res.data.shareCount
    }
}

//获取视频播放地址
async function getVideoUrlBy() {
    let res = await getVideoUrl(info.id);
    if (res.data.code == 200)
        info.videoUrl = res.data.urls[0].url
}
//获取相关视频
function getSimVideoBy() {
    getSimVideo(info.id).then(res => {
        info.simList = res.data.data
    })
}
//获取视频详情数据
function getVideoDetailBy() {
    getVideoDetail(info.id).then(res => {
        info.mvList = res.data.data
    })
}
//获取视频点赞收藏评论数
function getVideoDetailsBy() {
    getVideoDetails(info.id).then(res => {
        info.islike = res.data.liked;
        info.likedCount = res.data.likedCount;
        info.commentCount = res.data.commentCount;
        info.shareCount = res.data.shareCount;
    })
}

//监听路由变化
watch(() => router.currentRoute.value, () => {
    reload()   //重新刷新页面
})


onMounted(() => {
    //保存对应的mv id
    info.id = route.params.id
    info.type = route.params.type

    if (info.type == 'mv') {
        info.commentType = 1 //评论类型是mv
        getMvDetailBy() //获取mv详细信息
        getSimiMvBy()  //获取相似mv
        getMvUrlBy()   //获取mv播放地址
        getMVDatas()  //获取点赞评论分享数据
    } else if (info.type == 'video') {
        info.commentType = 5
        getVideoUrlBy();  //获取视频播放地址
        getSimVideoBy(); //获取相关视频
        getVideoDetailBy();  //获取视频详情数据
        getVideoDetailsBy(); //获取视频点赞收藏评论数
    }

})
</script>

<style lang="scss" scoped>
.detail {
    display: flex;
    justify-content: space-between;

    .left {
        position: relative;
        width: 60%;

        .play {
            background: black;

            video {
                height: 400px;
                width: 100%;
            }

        }

        .video-comment {
            margin-top: 20px;
        }
    }

    .right {
        margin-left: 40px;
        width: 40%;

        .item {
            margin-top: 20px;
        }
    }
}
</style>
